Кейс "Пикантье"

Редизайн сайта для компании по производству соусов
Пикантье — компания изготавливающая соусы и майонезы с 1998 года для ресторанно-гостиничного бизнеса

Проблемы клиента:

  1. Сайт морально устарел. Клиент стремиться развивать свою клиентскую базу и сотрудничать с более крупными брендами и при этом показывать им сайт "за который не стыдно"
  2. Компания провела ренейминг и если раньше она называлась "невафуд", сейчас ее новое название "пикантье"
  3. Компания не имеет единого стиля. Листовки, визитки, упаковки - все в разных стилистиках и компания не знает в какую сторону стиля ей двигаться.
  4. Сайт не отражал все услуги компании, которые они предоставляют
Рисунок - старый сайт

Дополнительные проблемы

В ходе аудита и дальнейших исследований было выяснено следующее:

  1. Многие сотрудники кампании сами не понимали как их компания сейчас называется "невафуд" или "пикантье". Двойной логотип в шапке старого сайта путал еще больше и самих сотрудников и клиентов компании
  2. Структура старого сайта была проста. но при этом очень запутанна. Было множество "висячих" в воздухе страниц, которые не имели привязки ни к меню ни к каталогу ни к каким либо еще страницам.
  3. На сайт лился трафик, но продаж с сайта практически не поступало
  4. У компании имеется несколько филиалов в разных городах, сама компания этим гордиться, но на сайте подобное практически нигде не отражалось
  5. На сайте отсутствовали призывы к действию, формы для связи и маркетинговые крючки, которые могли бы зацепить пользователя
Рисунок - старый сайт

Задачи

После общения с клиентом, сотрудниками и аудита сайта я смогла выделить следующий пул задачь:

  1. Сформировать единый стиль компании, которая она сможет использовать для всех отраслей
  2. За счет нового сайта передать дополнительные услуги компании, которые являются конкурентными преимуществами компании
  3. Провести исследование среди конкурентов и разработать новый сайт с проработанной структурой, для более удобной навигации.
  4. Разработать единую систему на которую можно опираться компании при разработки Landig-ов и айдентики
  5. Заложить в структуру сайта блоки и страницы для СЕО-продвижения
  6. Заложить в концепции сайта KV и анимацию для создания вау-эффекта у потенциальных клиентов
Итог по задачам:
Клиент хотел получить красивый и привлекательный сайт, который станет их визитной карточкой. В ходе переговоров было выяснено что это будет скорее корпоративный сайт с каталогом, ведь каталог нужен для информировании клиентов о продукции компании, поэтому главный упор должен идти именно на визуал и эмоции. От себя же я решила поставить дополнительную задачу и соблюсти UX и маркетинговую структуру, чтобы не только передать "вау-эффект" но и более подробнее ознакомить пользователей с компанией, раскрыть ее суть и сделать это все с удобством.
Работа над анализом и разработкой концепта шла параллельно. Это было сделано специально, ведь анализ достаточно кропотливый процесс, который не всегда прозрачен для клиентов, но при этом у нас с командой был принцип: "мы встречаемся с клиентом каждую неделю и сообщаем о результатах". это было сделано для того, чтобы клиент понимал что мы активно работаем над его проектом и чтобы минимизировать правки, так как в оперативном формате мы могли получить обратную связь.

Мудборды

Изучив конкурентов, сегмент, я начала искать похожие сайты в фуд-сегменте. Наиболее привлекательными мне показались сайты бургерных, но так же я рассматривала прямых конкурентов таких брендов как "хаенз" и "астория". Так же в мудборде были собраны мудборды для 3-х категорий:
  1. Мудборды для стилистических решений
  2. Интересные композиционные решения
  3. Мудборды для анимации
Рисунок - мудборды

Структура

Для того, чтобы понять структуру сайта для начала решили разобрать ту, что уже имеется на сайте, это нужно было для того, чтобы понять полноту страниц, услуг, сегментов и пр. и сравнить с тем, что еще хочет видеть клиент у себя на сайте.
На основе разобранной структуры была разработана новая:
Рисунок - часть структуры

1-й концепт

Клиент недавно разработал новый дизайн своих бутылочек для соусов и они им очень нравились, поэтому основываясь на их предпочтениях для начала я решила продолжить их стиль и предложить сайт как продолжение стиля в их цветах - черном и желтом.
Лично мне данное сочетание цветов не очень нравилось, так как черный цвет - не лучший цвет для еды, но решив обыграть его в более ярком и молодежном стиле я предложила клиенту 1-й концепт:
Рисунок - 1-й концепт
Итого 1-й концепт
Клиент не принял 1-й концепт, так как посчитал что данный концепт больше похож на бургерную. Пусть изначально клиенту нравилась концепция черного цвета как основного, но по итогу в ходе обсуждения мы решили отойти от этого и попробовать что-то иное. Поэтому в остальных концептах я решила не привязывать свои решения к уже имеющейся продукции и предложить что-то кардинальное другое.

2-й Концепт

Переосмысляя стилистику я решила отталкиваться от цветов кетчупа и горчицы, а именно красного и оранжевого. Поэтому были предложены следующие варианты, более аккуратные и эстетичные. так же в ходе обсуждения клиент выявил желание сделать что-то более элитарное и аккуратное
Рисунок - 2-й концепт
Итог 2-й концепт
2-й концепт уже нравился больше, но не был принят, так как клиент выявил опасение что данная стилистика больше похожа на сайт ресторана. Я согласилась с данным высказыванием клиента, так как изначально идея (красная) была фотография в овале в форме тарелки и различные видя с соусами, но в сочетании с антиквой действительно было больше похоже на ресторанную историю, нежели чем про производство соусов.

Переосмысление концептов

В обоих версиях было то, что вызывало у клиента эмоции и были моменты которые ему нравились и не нравились, поэтому я пришла к выводу что стоит совместить оба концепта и из этого сделать что-то новое
Рисунок - варианты переосмысления

Опрос пользователей

В первую очередь заказчик - производство и завод, поэтому я решила добавить именного заводского элемента в дизайн. Поэтому я решила упростить композицию и показать процесс производства. Но чтобы убедиться в своих гипотезах было принято решение составить вопросы и опросить пользователей:
  1. Какие эмоции вызывают каждый вариант концептов
  2. Какие цвета ассоциируются с соусами
  3. Первые мысли
И пр.
По итогу опроса я убедилась что красный и желтые цвета - хорошее решение для соусов (и они не ассоциировались с макдаком) и фото и видео с производства - хорошая идея

3-й концепт

Убедившись в своих предположениях и собрав обратную связь от ЦА я предложила 3-й вариант концепта
Рисунок - 3-й концепт
Итог 3-й концепт
Клиент принял 3-й концепт практически без изменений, были лишь незначительные доработки (увеличить размеры логотипов и поменять немного форму)
Поэтому в итоге решили остальной сайт делать в данном концепте.

Идеи 3-го концепта:
  1. В фотографиях чаще показывать производство, чтобы пользователи не забывали что сайт в первую очередь про производство.
  2. KV - желтые банеры с бутылками это услуги, которые есть у компании (всего 3 спец услуги)
  3. В фотографиях показывать реальные фотографии еды, чтобы вызывать аппетит у пользователей
  4. Совмещать красный и желтый, но не перемешивать. Мне хотелось показать цвета и кетчупа и горчицы, но при этом уйти от ассоциации с Макдональдсом, поэтому цвета пересекаются, но не совмещаются.
  5. Строить блоки для анимации просто, но ярко. Вся анимация на сайте технически выполнена достаточно просто, чтобы была легка в разработке, но при этом чтобы вызывать то самое "вау" у пользователей при скролинге сайта

Каталог

Следующим глобальным шагом стала проработка каталога. Тут стало несколько вопросов:
  1. Какие варианты деления каталога лучше использовать?
  2. Важно ли сохранить текущий вариант деления?
  3. Как удобно оптимизировать новые виды соуса при добавлении?
  4. Важно ли сохранить варианты расфасовки соусов?
  5. Стоит ли оптимизировать каталог под прямую продажу и оформление с сайта?

Конкурентный анализ

На основе анализа было рассмотрены разные варианты каталога у прямых и косвенных конкурентов компании и наиболее частое деление было следующим:
  1. По типу соуса (майонезные, масленые и пр.)
  2. По типу блюд (для картошки)
  3. По упаковке
  4. По вкусовым качествам
  5. Тип клиента HORECA
Рисунок - вырезки из анализа
Выводы анализа:
Пришли к выводу что деление на майонезы/ соусы майонезные / соусы томатные и др – его уже никто не использует. Т.е. клиент не ищет конкретно- принципиально майонезный соус. Он ищет либо по наименованию (ну типа – мне нужно что-то сырное) , или по типу использования ( по идее , у крафтфуд хайнц есть такое деление – можно посмотреть вот тут: https://kraftheinzfoodservice.ru/catalog/ - продукты, по факту поделены по виду упаковки.
Кроме того, была идея группировать продукты по принадлежности для того или иного типа фаст фуда – для пиццерии ( может быть и балк, и дип-пот, и бутылка)
Рисунок - структура каталога

Прототип каталога

Было принято решение что каталог остается только как средство ознакомления с продукцией, поэтому решили не усложнять фильтрация и поиск по нему, все должно быть структурно, лаконично, понятно и привычно пользователю. Поэтому было предложена структура с боковой фильтрацией каталога чтобы различные ЦА могли быстро искать соусы в удобной для них категории
Рисунок - варфрейм каталога
Итог фильтрации каталога:
Клиент одобрил подобное решение и был с ним согласен и после корректировок был разработан дизайн каталога
Рисунок - фильтрация каталога
Дополнительные сложности и гипотезы
Во время разработки каталога было разработано множество гипотез, в том числе это касалось и изображений на карточек. Изначально была идея показывать мазки соусов, но примерив данный вариант вся команда быстро отказалась от этой идеи, т.к. разные соусы имели разные цвета и многие из них выглядели не аппетитно
Также касательно фотографий была идея сохранить фотографии клиента с тарелочками и соусом на них, но фотографии были низкого качества и не вписывались в предложенный концепт.
В ходе поиска решений было предложено множество вариантов, но остановились на вариантах на соусах крупным планом без границ. Это передает и цвет и структуру соуса, и глубже погружает пользователя в продукт

Карточка каталога

При работе над карточкой каталога изначально были условия которые должны были учитываться:
  1. Обязательна фотография соуса
  2. Должно было быть показано к каким блюдам подходит соус
  3. Обязательно должно быть описание соуса
  4. В карточке должна учитываться возможность перехода на дополнительную услугу
  5. Должны быть предложены дополнительные варианты соуса
  6. Должны быть сохранены условия хранения
  7. Должны быть показаны тары в которых этот соус поставляется
  8. Должно учитываться количество тар в коробке (нельзя купить 1 бутылку, продажи идут только оптом)
На этой основе был предложен следующий концепт:
Рисунок - главный экран карточки соуса
Поиск форм
Данный вариант очень понравился команде, но заказчик сомневался, он сомневался что у него могут возникнуть сложности в оформлении других соусов, поэтому были предложены еще концепты похожего стиля с другими цветами и формами
Рисунок - другие варианты карточки товара
Итог 1-го варианта
Клиент сомневался в данном концепте, поэтому не принял его и попросил все же упростить первый экран и сделать его более привычным для их пользователей.

2-й вариант карточки каталога

Изучив интернет-магазины косвенных конкурентов клиента я решила пойти в более стандартизированную и привычную историю. Итогом стал 2-й вариант карточки:
Рисунок - 2-й вариант карточки
Итог страницы карточки товара
По итогу данный вариант был принят в работу

UI-Kit

Для удобства работы над сайтом была разработана система и для удобства непосредственной работы и прописаны правила использования. Для того, чтобы клиент в дальнейшем мог передавать ее и другим дизайнерам над работой над лендингами, презентацией и пр и учитывал выбранную стилистику и цвета, что были заложены.

Типографика

Были прописаны варианты H-заголовков для десктоп и мобильных версиях. А так же оставлены все ссылки на источники для скачивания шрифтов для разработчика
Рисунок - типографика

Кнопки, иконки, импуты и пр

Для проекта так же индивидуально разрабатывались все элементы системы и их состояние при взаимодействии с элементами. Для удобства все было переведено в компоненты и стили
Рисунок - кнопки, цвета, иконки, импуты, чекбоксы, карточки

Хедер и футер

Для удобства наиболее частые повторяющиеся в макетах элементы, такие как хедер и футер были так же вынесены в компоненты. Это было сделано для удобства внесения правок и для удобства адаптации в последующем
Рисунок - шапка, подвал, форма связи, шапка add-страниц

Внутренние страницы

При разработки внутренних страниц было важно сохранить консистентность, поэтому большинство блоков в внутренних страницах пересекаться с блоками с главной страницы сайта. Но так же были добавлены и новые для оптимизации контента на сайте. Так например страница "записки шефа" имеет уникальную структуру

Записки шефа

По сути это страница-блог, где компания выкладывает свои статьи и новостные события. Изначально было предложено сделать фильтрацию по темам блога, но в итоге в ходе обсуждения с заказчиком от этой идеи было принято решение отказаться.
Также для страницы "записки шефа" были дополнительно разработаны 2 внутренние страницы для видео-контента и для текстового контента.
В текстовом контенте ширина блока для текста выставлена не больше 800px, это сделано специально, чтобы пользователям было удобно читать на десктопных устройствах
рисунок - записки шефа

О компании

Одна из первых страниц среди внутренних и так же ее стоит выделить отдельно т.к. компания на рынке больше 25 лет и у нее достаточно длительная история. Тут мне хотелось передать больше эмоций поэтому я попросила заказчиков собрать фотографии сотрудников с различных корпоративов или старые пленочные фотографии, чтобы передать историю и атмосферность. Так например подобное больше всего раскрывается в 1-м блоке в хронологии
Рисунок - страница о компании

Дистрибьюторы, производство, контакты

Также одни из внутренних страниц сайта, где можно заметить что блоки имеют одинаковую структуру при разном оформлении для оптимизации процесса разработки
Рисунок - Дистрибьюторы, производство, контакты

Другие внутренние страницы сайта

Тут также представлена страница вакансии с карточкой вакансии и примеры страниц с услугами компании, где описана сама услуга, партнеры и призыв к действию
Рисунок - вакансии, услуги
Итог страниц
В итоге было разработано 20 уникальных страниц сайта (не считая меню, поп-апов, технических страниц и 404)
[Чтобы запустить анимацию на нее нужно 2 раза кликнуть, иконка проигрывателя почему-то не отображается:( ]

Анимация

Так же для сайта была разработана уникальная анимация. Большинство анимации разрабатовалось в Автер Эффектс и передовалось верстальщику в 2-х форматах
  1. Формат AE
  2. Лотти файл

Анимация главного экрана

Для уникализации главного экрана было разработано появление элементов. Технически это изменение по позиции и непрозрачности, поэтому не сложно в разработке, но при этом придает проекту дополнительный стиль
[Чтобы запустить анимацию на нее нужно 2 раза кликнуть, иконка проигрывателя почему-то не отображается:(]

Анимация при скролле

Также к дополнению при скролле было добавлено появление изображений из масок и появление контента при скролле
[Чтобы запустить анимацию на нее нужно 2 раза кликнуть, иконка проигрывателя почему-то не отображается:( ]

Сроки

Весь описанный процесс занял 3 месяца, от разработки концепта до анимации. Так же в ходе верстки были еще дополнительные вопросы которые пришлось решать и которые еще решаются. Так же данный проект еще находиться на стадии технической разработки, но уже первые результаты можно посмотреть по этой ссылочке

Итог

  1. На всем сайте и продукции компании пришли к единому логотипу "пикантье". Прошлое название "невафуд" осталось только в разделе "о компании" в качестве истории, где описали что изначально название было такое, но сейчас оно изменилось.
  2. Раскрыли все имеющиеся услуги компании и подготовили шаблонные страницы на случай если у компании расшириться список услуг
  3. Разработали KV для компании
  4. Проработали структуру сайта с учетом упрощения навигации на сайте
  5. Разработали единую стилистику компании и дали рекомендации по использованию
Картинка - KV

Выводы

Я благодарна всем кто дочитал до конца, это был очень интересный проект с которым я кайфанула. И в описание кейса я не смогла вместить все, так как еще не было возможности проверить метрические показатели после редизайна или дополнительные идеи, например после моей рекомендации клиенты решили отрисовать 3D модели своих бутылочек чтобы в дальнейшем заменить их на сайте где сейчас стоят фотографии этих бутылок.
Также для клиентов я расписала правила для фотографий, чтобы они передавали это своему фотографу и он делал фотографии в соответствии со всеми задумками (делать фотки вместе заказчик отказался)
Вскоре дополню этот кейс актуальными ссылками на сайт.

Буду рада сотрудничать с вами :)

Кейс на беханс (кейс на английском языке)
Кейс на дипрофайл (кейс на русском языке)